<template>
  <div class="main">
    <el-collapse accordion>
      <el-collapse-item name="1">
        <template #title>
          数据同步<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
          该操作，是为了防止文章数据大批量的新增，导致的搜索引擎数据没有进行实时的更新。这里搜索引擎的数据更新采用的是定时，所以为了立即同步，可以点击此按钮
        </div>
        <div style="margin-top: 10px">
          <el-button v-loading.fullscreen.lock="fullscreenLoading" @click="dataSyn">
            数据同步
          </el-button>
        </div>
      </el-collapse-item>

      <el-collapse-item name="2">
        <template #title>
          定时设置<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>主要设置定时任务的需要定时执行的时间，例如：访问量定时任务、排行榜定时任务...</div>
        <div style="width: 100%">
          <ul>
            <li>
              <div>访问定时任务&nbsp;&nbsp;</div>
              <div>asdfafd</div>
            </li>
          </ul>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'

const fullscreenLoading = ref(false)

const dataSyn = () => {
  fullscreenLoading.value = true
  request
    .get('/es/data-syn')
    .then((res) => {
      setTimeout(() => {
        fullscreenLoading.value = false
        ElNotification.success('数据同步成功')
      }, 2000)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
      setTimeout(() => {
        fullscreenLoading.value = false
      }, 1000)
    })
}
</script>

<style scoped>
.main {
  background: #fff;
  padding: 0 20px;
}

li:nth-child(1) {
  width: 30%;
  display: flex;
}
</style>